<template>
  <div>
    <a-table
      :expandedRowKeys="expandedRowKeys"
      :columns="columns"
      :data-source="data"
    >
      <a slot="name" slot-scope="text">{{ text }}</a>
      <span slot="customTitle"> 学生姓名</span>
      <template slot="action" slot-scope="text, record">
        <span slot="action">
          <a @click="showDetail(text.key)">查看详情 </a>
          <a-divider type="vertical" />
          <a-popconfirm
            title="确认踢出此名同学?"
            ok-text="确定删除"
            cancel-text="取消"
            @confirm="delClassStudent(record)"
          >
            <a>踢出班级</a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a @click="sentNotice(record)">发送通知</a>
        </span>
      </template>
      <p
        slot="expandedRowRender"
        slot-scope="record"
        :expandRowByClick="true"
        style="margin: 0"
      >
        {{ record.description }}
      </p>
    </a-table>
    <p>班级总人数:{{ classCount }}人</p>

    <a-modal
      v-model="visible"
      title="发送通知"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="取消"
      okText="发送"
    >
      <a-form-model-item :label="'(' + id + ')学生姓名:'">
        <a-input disabled v-model="name" />
      </a-form-model-item>
      <a-form-model-item label="通知内容">
        <a-textarea placeholder="请输入通知内容" v-model="notice" :rows="4" />
      </a-form-model-item>
    </a-modal>
  </div>
</template>
<script>
const columns = [
  {
    dataIndex: "name",
    key: "name",
    slots: { title: "customTitle" },
    scopedSlots: { customRender: "name" }
  },
  {
    title: "学号",
    dataIndex: "code",
    key: "code"
  },
  {
    title: "邮箱",
    dataIndex: "email",
    key: "email"
  },
  {
    title: "专业",
    dataIndex: "major",
    key: "major"
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" }
  }
];

export default {
  props: ["classId", "classCount"],
  data() {
    return {
      data: [],
      columns,
      expandedRowKeys: [],
      form: {
        studentId: 0,
        classId: this["classId"]
      },
      visible: false,
      id: "",
      name: "",
      notice: ""
    };
  },
  methods: {
    showDetail(v) {
      for (var i = 0; i < this.expandedRowKeys.length; i++) {
        if (
          this.expandedRowKeys[i] !== "" &&
          String(v) == this.expandedRowKeys[i]
        ) {
          // console.log("index" + i);
          this.expandedRowKeys.splice(i, 1);
          return;
        }
      }
      this.expandedRowKeys.push(String(v));
    },
    getInfo() {
      // 获取班级信息
      this.$axios
        .get("/get/classStudent/" + this["classId"], {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          // console.log(res);
          if (res.data.code == 200) {
            this.data = res.data.data;
            for (let i in res.data.data) {
              Object.assign(this.data[i], { key: i + 1 });
            }
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    delClassStudent(record) {
      this.form.studentId = record.userId;
      // 需要踢出的userId
      // console.log(this.form.studentId)
      this.$axios
        .post("/delete/class", this.form, {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          // console.log(res);
          if (res.data.code == 200) {
            this.getInfo();
            this.classCount--;
            // this.$message.success(res.data.msg);
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    sentNotice(record) {
      console.log(record);
      this.name = record.name;
      this.id = record.userId;
      this.visible = true;
    },
    handleCancel(e) {
      this.visible = false;
      this.notice = "";
    },
    handleOk(e) {
      console.log(e);
      this.$axios
        .post(
          "/post/notices",
          { toUserId: this.id, text: this.notice },
          {
            headers: {
              Authorization: localStorage.getItem("token")
            }
          }
        )
        .then(res => {
          if (res.data.code == 200) {
            this.notice = "";
            this.$message.success(res.data.msg);
          } else {
            this.$message.error(res.data.msg);
          }
        });
      this.visible = false;
    }
  },
  created() {
    this.getInfo();
  }
};
</script>
